<template>
  <c-loading :loading="false" :bottomSafe="false">
    <view class="container home">
      <view v-for="setting in list" :key="setting.id">
        <template v-if="setting.componentCode == 'Banner'">
          <c-swiper :list="setting.context" 	previous-margin="20rpx" :filter="a => isExpired(a, now)" class="branner">
            <template #default="{ item }">
              <c-img :src="item.src" class="branner-img" mode="aspectFill" @tap="router.tryLink(item)" />
            </template>
          </c-swiper>
        </template>
        <template v-else-if="setting.componentCode == 'Adv'">
          <c-img :src="setting.context[0]" class="adv-img" :style="`height:${getHeight(710,setting.setting.imgRatio)}`" v-if="isExpired(setting.setting, now)" mode="aspectFit" @tap="router.tryLink(setting.setting)" />
        </template>
        <goods-shelves v-else-if="setting.componentCode == 'GoodsShelves'" v-bind="setting.setting" :data="setting.context"></goods-shelves>
        <goods-like v-else-if="setting.componentCode == 'Like'"></goods-like>
      </view>
      <c-pager v-bind="pager"></c-pager>
    </view>
  </c-loading>
</template>

<script setup>
import { View } from '@tarojs/components';
import { CLoading, CSwiper, CPager, CImg } from '@/components';
import { ref } from 'vue';
import GoodsShelves from './components/GoodsShelves.vue';
import GoodsLike from './components/GoodsLike.vue';
import { afterLogin, useLoading, usePager, useRouter } from '@/hooks';
import api from '@/api';
import { isExpired, useTimer } from '@/hooks/timer';

const now = useTimer();
const router = useRouter();
const { list, pager, reload } = usePager({
  immediate: false,
  limit: 4,
  handler: (skip, take) => api.user.appPage({ skip, take, code: 'HOME' })
});
const getHeight = (width, imgRatio) => {
  return width / (imgRatio ?? 1) + 'rpx';
};
useLoading(async () => {
  await afterLogin();
  reload();
});
</script>
<style lang="scss">
.container.home {
  
  .branner-img {
    width: 710px;
    height: 360px;
    border-radius: 15px;
  }
  .branner {
    width: 750px;
    margin: auto;
    height: 360px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .adv-img {
    width: calc(100% - 40px);
    margin: 0 20px;
  }
}
</style>
